<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
	
<h:head>
	<h:outputStylesheet library="css" name="style.css"/>	
</h:head>

<h:body>
	<p:dialog id="editSuperDialog" width="1000" height="590" header="Edit Goal Super Selection" widgetVar="editSuperDlg" modal="true"  resizable="false" position="center" closable="true">
		<h:form id="editSuperForm">

        	<p:dataTable var="user" value="#{superOwnerSelectionBoundary}" paginator="true" rows="8" 
        		         paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}" 
        				 paginatorPosition="bottom"  id="superTable" lazy="true"  style="width:100%">  
	      	
	      		<p:column style="width:5%">
  					<p:commandButton icon="ui-icon-plusthick" actionListener="#{superOwnerSelectionBoundary.addSuperOwnerToList(user)}" 
  					                 update=":#{p:component('editSuperForm')}" styleClass="tableButton"/>
  				</p:column>
	      
		    	<p:column headerText="Username" sortBy="#{user.username}" filterBy="#{user.username}">  
		        	<h:outputText value="#{user.username}" />  
		    	</p:column>  
	      
		   	 	<p:column headerText="Firstname" sortBy="#{user.firstName}" filterBy="#{user.firstName}">  
		        	<h:outputText value="#{user.firstName}" />  
		    	</p:column>  
	      
		    	<p:column headerText="Lastname" sortBy="#{user.lastName}" filterBy="#{user.lastName}">  
		        	<h:outputText value="#{user.lastName}" />  
		    	</p:column>  
	       
		    	<p:column headerText="Role" sortBy="#{user.role.title}" filterBy="#{user.role.title}">  
		        	<h:outputText value="#{user.role.title}" />  
		    	</p:column>
		    	  
        	</p:dataTable>  
	        <br /><br />
	        
	       	<p:dataTable  var="selected_user" value="#{superOwnerSelectionBoundary.superOwnerList}" id="selectedSuperTable" style="width:976px;" 
	       	scrollable="true" scrollHeight="120" >  
	       	      
	       	    <f:facet name="header">  
            		List of Selected Super  
        		</f:facet>  
	       	             
	           	<p:column style="width:6%">
  					<p:commandButton icon="ui-icon-minusthick" actionListener="#{superOwnerSelectionBoundary.removeSuperOwnerToList(selected_user)}" 
  					                 update=":#{p:component('editSuperForm')}" styleClass="tableButton"/>
  				</p:column>
	      	
		    	<p:column headerText="Username" style="width:23.5%">  
		        	<h:outputText value="#{selected_user.username}" />  
		    	</p:column>  
	      
		   	 	<p:column headerText="Firstname" style="width:23.5%">  
		        	<h:outputText value="#{selected_user.firstName}" />  
		    	</p:column>  
	      
		    	<p:column headerText="Lastname" style="width:23.5%">  
		        	<h:outputText value="#{selected_user.lastName}" />  
		    	</p:column>  
	       
		    	<p:column headerText="Role" style="width:23.5%">  
		        	<h:outputText value="#{selected_user.role.title}" />  
		    	</p:column>  
        	</p:dataTable>
        	  
       		<p:panelGrid styleClass="NoBorderTable" style="width:100%;">
       			<p:row style="border: none;">
       				<p:column colspan="2" style="border: none;"></p:column>
       			</p:row>
       			<p:row style="border: none;">
       				<p:column colspan="2" style="border: none;"></p:column>
       			</p:row>
       			<p:row>
       				<p:column colspan="1" style="text-align:right;width:90%;border: none;">
       					<p:commandButton value="Cancel" icon="ui-icon-circle-close" actionListener="#{superTable.cancelSelection()}"
       									 update=":#{p:component('editSuperForm')}" oncomplete="editSuperDlg.hide()" /> 
       				</p:column>
       				<p:column colspan="1" style="text-align:left;width:10%;border: none;">
       					<p:commandButton value="Confirm" icon="ui-icon-circle-check" actionListener="#{superTable.confirmSelection()}"
       						   			 update=":#{p:component('contentForm')}"  oncomplete="editSuperDlg.hide()"/>
       				</p:column>
       			</p:row>
       		</p:panelGrid>
		</h:form>
	</p:dialog>
</h:body>
</html>
